<template>
  <div class="profile-container">
    <el-tabs class="page-tabs">
      <el-tab-pane label="个人信息">
        <el-container>
          <el-header class="tab-header">
            <div v-if="updateFlag">
              <el-button @click="doUpdate">保存</el-button>
              <el-button @click="cancel('updateForm');updateFlag = false">取消</el-button>
            </div>
            <div v-else>
              <el-button @click="update">编辑</el-button>
            </div>
          </el-header>
          <el-container>
            <el-aside class="tab-aside" width="260">
              <el-image :src="require('../../image/user.png')" style="width:100px;height:100px" />
            </el-aside>
            <el-main class="tab-main">
              <el-form ref="updateForm" :model="updateForm" :rules="formRules" class="update-form">
                <el-form-item v-if="!updateFlag"><span class="user-name">{{ `${userInfo.name}（${userInfo.alias}）` }}</span></el-form-item>
                <el-form-item v-if="updateFlag">
                  <span class="user-detail">姓名：</span>
                  <el-input v-model="updateForm.alias" class="update-input" />
                </el-form-item>
                <el-form-item v-if="!updateFlag">
                  <span class="user-detail">角色：</span>
                  <span>{{ roleName }}</span>
                </el-form-item>
                <el-form-item v-if="!updateFlag">
                  <span class="user-detail">出单中心：</span>
                  <span class="main-center-span">{{ mainCenter }}</span>
                  <span>{{ viceCenter }}</span>
                </el-form-item>
                <el-form-item prop="phone">
                  <span class="user-detail">手机号码：</span>
                  <el-input v-if="updateFlag" v-model="updateForm.phone" :maxlength="11" show-word-limit class="update-input" />
                  <span v-else>{{ userInfo.phone }}</span>
                </el-form-item>
                <el-form-item prop="email">
                  <span class="user-detail">电子邮箱：</span>
                  <el-input v-if="updateFlag" v-model="updateForm.email" class="update-input" />
                  <span v-else>{{ userInfo.email }}</span>
                </el-form-item>
              </el-form>
            </el-main>
          </el-container>
        </el-container>
      </el-tab-pane>
      <el-tab-pane label="密码修改">
        <div class="change-password-form">
          <change-pwd-form />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import API from '@/utils/api/user/profile'
import changePwdForm from '@/views/user/profile/ChangePwd'

export default {
  name: 'Profile',
  components: { changePwdForm },
  data() {
    const phoneValid = (rule, value, callback) => {
      if (value.length !== 11) {
        callback('*请输入正确的手机号码')
      } else {
        callback()
      }
    }
    return {
      name: '',
      alias: '',
      updateFlag: false,
      updateForm: {
        alias: '',
        phone: '',
        email: ''
      },
      formRules: {
        phone: [{ type: 'phone', required: true, validator: phoneValid, trigger: 'blur' }],
        email: [{ type: 'email', required: true, message: '*请输入正确的邮箱' }]
      },
      userInfo: {},
      roleName: '',
      mainCenter: '',
      viceCenter: ''
    }
  },
  async created() {
    await this.getUserInfo()
    await this.getUserRole()
    await this.getUserCenter()
  },
  mounted() {
  },
  methods: {
    // 获取用户信息
    getUserInfo: function() {
      API.userInfoAPI().then(response => {
        const res = response.data.data
        if (response.data.flag === 'success') {
          this.userInfo = res
        } else {
          this.$errorMsg(res)
        }
      }).catch(error => { this.$errorMsg('' + error) })
    },
    // 获取用户角色
    getUserRole: function() {
      API.userRoleAPI().then(response => {
        const res = response.data.data
        if (response.data.flag === 'success') {
          const role = []
          res.forEach(item => {
            role.push(item.roleName)
          })
          this.roleName = role.join(',')
        } else {
          this.$errorMsg(res)
        }
      }).catch(error => { this.$errorMsg('' + error) })
    },
    // 获取用户出单中心
    getUserCenter: function() {
      API.userCenterAPI().then(response => {
        const res = response.data.data
        if (response.data.flag === 'success') {
          if (!res || res === 'null') {
            this.mainCenter = ''
            this.viceCenter = '全部'
          } else {
            this.mainCenter = res.mainCenterName
            this.viceCenter = res.minorCenterName
          }
        } else {
          this.$errorMsg(res)
        }
      }).catch(error => { this.$errorMsg('' + error) })
    },
    update: function() {
      this.updateFlag = true
      this.updateForm = Object.assign({}, this.userInfo)
    },
    // 修改个人信息
    doUpdate: function() {
      this.$refs.updateForm.validate((valid) => {
        if (valid) {
          const form = this.updateForm
          const params = {
            alias: form.alias,
            phone: form.phone,
            email: form.email,
            _csrf: sessionStorage._csrf
          }
          API.updateUserInfoAPI(params).then(response => {
            const res = response.data.data
            if (response.data.flag === 'success') {
              this.$successMsg('个人信息修改成功')
              this.getUserInfo()
              this.updateFlag = false
            } else {
              this.$errorMsg(res)
            }
          }).catch(error => { this.$errorMsg('' + error) })
        }
      })
    },
    cancel: function(form) {
      this.$refs[form].clearValidate()
      this.$refs[form].resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
.profile-container {
  height: calc(100vh - 84px);
  width: 100%;
}
.page-tabs {
  height: 100%;
  width: 100%;
  padding: 2px 5px;
}
.tab-header {
  line-height: 45px;
}
.tab-aside {
  background-color: transparent;
  text-align: right;
}
.tab-main {
  padding: 20px 0px;
}
.user-name {
  display: inline-block;
  font-size: 18px;
}
.user-detail {
  display: inline-block;
  width: 96px;
  margin-left: 30px;
}
.update-input {
  width: 200px;
}
.change-password-form {
  width: 316px;
}
.main-center-span {
  color: rgb(231, 59, 59);
  font-size: 14px;
}
</style>
<style lang="scss">
.update-form {
  .el-form-item__error {
    margin-left: 128px;
  }
}
</style>
